<template>
  <view class="order-list-page">
    <view class="order-list-header">
      <text>全部订单</text>
    </view>

    <scroll-view scroll-y="true" class="order-scroll-list">
      <!-- 进行中 -->
      <view v-if="orders.processing.length > 0" class="order-section">
        <view class="section-title">进行中</view>
        <view v-for="(order, index) in orders.processing" :key="index" class="order-item">
          <view>订单编号：{{ order.orderId }}</view>
          <view>开始时间：{{ order.startTime }}</view>
          <view>已开台：{{ timeElapsed[order.orderId] || '0分0秒' }}</view>
        </view>
      </view>

      <!-- 待付款 -->
      <view v-if="orders.pendingPayment.length > 0" class="order-section">
        <view class="section-title">待付款</view>
        <view v-for="(order, idx) in orders.pendingPayment" :key="idx" class="order-item">
          <view>订单编号：{{ order.orderId }}</view>
          <view>总价：¥{{ order.totalPrice }}</view>
        </view>
      </view>

      <!-- 待评价 -->
      <view v-if="orders.toReview.length > 0" class="order-section">
        <view class="section-title">待评价</view>
        <view v-for="(order, idx) in orders.toReview" :key="idx" class="order-item">
          <view>订单编号：{{ order.orderId }}</view>
          <view>结束时间：{{ order.endTime }}</view>
        </view>
      </view>

      <!-- 待使用 -->
      <view v-if="orders.toView.length > 0" class="order-section">
        <view class="section-title">待使用</view>
        <view v-for="(order, idx) in orders.toView" :key="idx" class="order-item">
          <view>订单编号：{{ order.orderId }}</view>
          <view>店铺名称：{{ order.shopName }}</view>
          <view>球桌编号：{{ order.tableNumber }}</view>
          <view>开始时间：{{ order.startTime }}</view>
          <view>结束时间：{{ order.endTime }}</view>
          <view>创建时间：{{ order.createdTime }}</view>
        </view>
      </view>

      <!-- 历史订单 -->
      <view v-if="orders.history.length > 0" class="order-section">
        <view class="section-title">已评价</view>
        <view v-for="(order, idx) in orders.history" :key="idx" class="order-item">
          <view>订单编号：{{ order.orderId }}</view>
          <view>创建时间：{{ order.createdTime }}</view>
          <view>结束时间：{{ order.endTime }}</view>
        </view>
      </view>

      <!-- 无订单提示 -->
      <view v-if="!hasAnyOrder" class="empty-tip">暂无订单</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orders: {
        processing: [],
        pendingPayment: [],
        toReview: [],
        toView: [],
        history: []
      },
      timeElapsed: {}
    };
  },
  computed: {
    hasAnyOrder() {
      return (
          this.orders.processing.length > 0 ||
          this.orders.pendingPayment.length > 0 ||
          this.orders.toReview.length > 0 ||
          this.orders.toView.length > 0
      );
    }
  },
  onLoad() {
    this.loadAllOrders();
    this.startTimer();
  },
  onUnload() {
    this.stopTimer();
  },
  methods: {
    loadAllOrders() {
      const ordersList = uni.getStorageSync('ordersList') || [];

      // 确保只加载当前有效的订单状态
      this.orders.processing = ordersList.filter(order => order.status === 'processing');
      this.orders.pendingPayment = ordersList.filter(order => order.status === 'pendingPayment');
      this.orders.toReview = ordersList.filter(order => order.status === 'toReview');
      this.orders.toView = ordersList.filter(order => order.status === 'pendingUse');
      this.orders.history = ordersList.filter(order =>
          ['reviewed', 'refunded', 'completed'].includes(order.status)
      );

      // 计算计时
      this.calculateElapsedTime();
    },
    calculateElapsedTime() {
      const now = Date.now();
      this.timeElapsed = {};
      this.orders.processing.forEach(order => {
        const diffMs = Math.max(0, now - order.startTime);
        const minutes = Math.floor(diffMs / 60000);
        const seconds = Math.floor((diffMs % 60000) / 1000);
        this.timeElapsed[order.orderId] = `${minutes}分${seconds}秒`;
      });
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.calculateElapsedTime();
      }, 1000);
    },
    stopTimer() {
      if (this.timer) clearInterval(this.timer);
    }
  }
};
</script>

<style>
.order-list-page {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.order-list-header {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.order-scroll-list {
  height: calc(100vh - 100rpx);
}

.order-section {
  background-color: white;
  margin-bottom: 30rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.order-item {
  padding: 15rpx 0;
  border-bottom: 1rpx solid #eee;
}

.order-item:last-child {
  border-bottom: none;
}

.empty-tip {
  text-align: center;
  color: #999;
  margin-top: 100rpx;
}
</style>
